<template>
  <div class="page">
    <m-header :title="setTitle(type)" :canback="Boolean(1)">
      <!-- <i v-if="type !='credit5'" @click="goTo('Extract')">提取</i> -->
    </m-header>
    <div class="body">
      <div class="content">
        <div class="num">
          <p>{{type==='speed_card'?'剩余数量':'累计收益'}}</p>
          <p class="total">{{data?data.config[type]:'0'}}</p>
        </div>
        <div class="btns" v-if="type==='speed_card'">
          <div  class="recharge btn-origin" @click="goTo('TurnOut',type)">转让</div>
        </div>
      </div>
      <!-- <ul v-if="data && data.data && data.data.length>0&&type==='speed_card'">
        <li class="list" v-for="(item,index) in data.data" :key="index">
          <ul>
            <li>
              用户：
              <span class="grade">{{item.username}}</span>
            </li>
            <li>
              数量：
              <span>{{item.num}}</span>
            </li>
            <li>
              备注：
              <span>{{item.remark}}</span>
            </li>
            <li>
              时间：
              <span>{{item.createtime}}</span>
            </li>
          </ul>
        </li>
      </ul> -->
      <ul v-if="data && data.data && data.data.length>0">
        <li class="list" v-for="(item,index) in data.data" :key="index">
          <div class="mine-grab">
            <span>{{item.remark}}</span>
            <span :class="{'list-num1':Number(item.num)<0, 'list-num2':Number(item.num)>0 }">{{item.num}}</span>
          </div>
          <div>{{item.createtime}}</div>
        </li>
      </ul>
      <!-- <ul >
        <li class="list" v-for="(item,index) in data.data" :key="index">
          <ul>
            <li class="identifier">
              <span>编号：{{item.orecode}}</span>
              <span v-if="Number(item.money)>0" class="list-num">+{{item.money}}</span>
              <span v-else class="list-num red">+{{item.money}}</span>
            </li>
            <li>
              等級：
              <span class="grade">{{item.levelname}}</span>
            </li>
            <li>
              价值：
              <span>{{item.level}}</span>
            </li>
            <li>
              智能合约收益：
              <span>{{item.days}}天{{parseInt(item.per)}}%</span>
            </li>
            <li>{{item.time}}</li>
          </ul>
        </li>
      </ul> -->
      <!-- <p v-else class="no-msg">没有更多了呢~</p> -->
      <next v-show="!data || !data.data || data.data.length==0" ref="next" :nomore="true"></next>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex';
import {Owner} from '@/server/server.js';
import {Load,Secret,Util} from '@/assets/commonjs/utils.js';
export default {
  data() {
      return {
          type:null,
          data:null
      };
  },
  mounted() {
      this.initData();
      this.getCoinOrder(this.type);
  },
  computed:{
      ...mapGetters(['uid','coinTxt'])
  },
  methods: {
      initData(){
          this.type = this.$route.query.type;
          Load.loadNext(this);
      },
      setTitle(type){
          switch(type){
              case 'credit1':
                  return this.coinTxt[type+'_text'];
                  break;
              case 'credit2':
                  return this.coinTxt[type+'_text'];
                  break;
              case 'credit3':
                  return this.coinTxt[type+'_text'];
                  break;
              case 'credit4':
                  return this.coinTxt[type+'_text'];
                  break;
              case 'credit5':
                  return this.coinTxt[type+'_text'];
                  break;
              case 'speed_card':
                  return this.coinTxt[type+'_text'];
                  break;
          }
      },
      goTo(route) {
          this.$router.push({ name: route,query:{type:this.type} });
      },
      getCoinOrder(type){
          let params = {
              id:this.uid,
              type
          }
          Owner.getCoinOrder(params).then(res=>{
              // if(res.code == 1){
                const data = JSON.parse(Secret.decrypt(res.data));
                data.data.forEach(item=>{
                  item.createtime = Util.formatDate(item.createtime)
                })
                console.log(data)
                this.data = data
                  // mui.toast(res.msg);
              // }else {
              //     mui.toast(res.msg);
              //     return ;
              // }
          })
        }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  // background: @bg-color;
  padding: 30px;
  color: @bg-color-white;
  .content {
    // height: 220px;
    padding: 60px 0 30px;
    background: @bg-card-color;
    border-radius: 8px;
    .btns {
        .display-flex();
        justify-content: center;
        align-items: center;
        border-radius: 8px;
      }
      .recharge {
        width: 50%;height: 70px;line-height: 70px;
        // margin: auto;margin-top: 57px;
        margin-top: 30px;
        border-radius: 20px;
        text-align: center;
      }
    .num {
      text-align: center;
      color: @primary-color;
      font-size: 40px;
      .total{
        color: @primary-color;
        font-size: 32px;
      }
    }
  }
  .list {
      margin-top: 20px;
      padding: 20px 30px;
      background: @bg-card-color;
      border-radius: 8px;
      .mine-grab {
        .display-flex();
        justify-content: space-between;
        padding-bottom: 8px;
        .list-num1 {
          font-size: 32px;
          color: red;
        }
        .list-num2 {
          font-size: 32px;
          color: @color-yellow;
        }
      }
    }
  // .list {
  //   margin-top: 20px;
  //   // height: 220px;
  //   padding: 22px;
  //   background: @bg-card-color;
  //   border-radius: 8px;
  //   font-size: 25px;
  //   .identifier {
  //     .display-flex();
  //     justify-content: space-between;
  //     .list-num {
  //       font-size: 35px;
  //       color: green;
  //     }
  //     .red {
  //       color: red;
  //     }
  //   }
  //   .grade {
  //     color: rgba(245, 190, 40, 1);
  //   }
  // }
}
</style>
